<template>
	<view v-show="isReady">
		<view :style="{height: titleNavHeight + statusBarHeight + 5 + 'px'}"
			style="position: fixed;top: 0;left: 0;right: 0;z-index: 9999;background-color: #ffffff;
			border-bottom: 1px solid #ebedf0;">
			<view :style="{height: titleNavHeight + 'px', top: statusBarHeight + 'px', width: '100%'}"
				class="nav-bar">
				<u-icon name="arrow-left" size="42" style="width: 40rpx;height: 40rpx;margin-right: 20rpx;"
					@click="go_back"></u-icon>
				<text class="text">图表展示</text>
			</view>
		</view>
		<view :style="{height: titleNavHeight + statusBarHeight + 5 + 'px'}"></view>
		<ReportForm v-if="isReady" :formConfig="formConfig" />
	</view>
</template>

<script>
	import ReportForm from './reportForm.vue';
	import { ReportPageController } from '@/api/reportController.js';
  import {getBoundingClientRect} from "@/utils";
	
	export default {
		name: 'reportPageRender',
		components: {
			ReportForm
		},
		data() {
			const {
				windowWidth,
				statusBarHeight
			} = uni.getSystemInfoSync()
      const rect = getBoundingClientRect(windowWidth, statusBarHeight);
			return {
				windowWidth: windowWidth,
				statusBarHeight: statusBarHeight,
				titleNavHeight: (rect.top - statusBarHeight) * 2 + rect.height,
				emptyWidth: rect.left - 10,
				headerHeight:0,

				isReady: false,
				formConfig: undefined,
				pageId: undefined
			}
		},
		methods: {
			go_back(){
				uni.navigateBack()
			},
			loadReportPage() {
				this.isReady = false;
				ReportPageController.view(this, {
					pageId: this.pageId
				}).then(res => {
					let temp = {
						pageId: res.pageId,
						pageName: res.pageName,
						pageCode: res.pageCode,
						groupId: res.groupId,
						pageJson: res.pageJson,
						formInfo: res.pageJson ? JSON.parse(res.pageJson) : {}
					}
					let formInfo = temp.formInfo.mobile;
					if (formInfo != null) {
						this.formConfig = {
							pageId: temp.pageId,
							pageName: temp.pageName,
							pageCode: temp.pageCode,
							gutter: formInfo.gutter || 20,
							labelWidth: formInfo.labelWidth || 100,
							labelPosition: formInfo.labelPosition || 'left',
							customFieldList: formInfo.customFieldList || [],
							filterItemWidth: formInfo.filterItemWidth || 350,
							widgetList: formInfo.widgetList || [],
							paramList: formInfo.paramList || []
						}
						this.isReady = true;
					} else {
						uni.showToast({
							icon: 'error',
							title: '没有找到移动端配置信息！',
							success() {
								uni.navigateBack();
							}
						});
					}
				}).catch(e => {});
			}
		},
		watch: {
			pageId: {
				handler() {
					this.loadReportPage();
				},
				immediate: true
			}
		},
    onLoad(option) {
      if (option && option.pageId ) {
        this.pageId = option.pageId
      }else {
        uni.showToast({
          icon: 'error',
          title: '没有找到pageId！',
        });
      }
    }
	}
</script>

<style lang="less">
	.nav-bar {
			position: absolute;
			display: flex;
			flex-direction: row;
			align-items: center;
			padding-left: 20rpx;

			.text {
				width: calc(100vw - 80px);
				color: #323233;
				font-weight: 500;
				font-size: 30rpx;
				display: flex;
				justify-content: center;
				justify-items: center;
			}

			.nav-right {
				display: flex;

				.mobile-font {
					color: #707070;
					font-size: 36rpx;

					&+.mobile-font {
						margin-left: 12rpx;
					}
				}
			}
		}
</style>
